import { t } from "@lingui/macro";
import { useTheme } from "@reactive-resume/hooks";
import { cn } from "@reactive-resume/utils";

type Props = {
  size?: number;
  className?: string;
};

export const Logo = ({ size = 32, className }: Props) => {
  const { isDarkMode } = useTheme();

  let src = "";

  switch (isDarkMode) {
    case false: {
      src = "/logo/light.svg";
      break;
    }
    case true: {
      src = "/logo/dark.svg";
      break;
    }
  }

  return (
    <div className="flex ">
      <img
        src={src}
        width={size}
        height={size}
        alt="Hok Resume"
        className={cn("flex-none rounded-sm", className)}
      />
      <h1 className="ml-3 mt-3 w-64 flex-1 text-xl font-medium">好客之道</h1>
    </div>
  );
};
